import { h } from 'vue';
import { Avatar, Tag, Tooltip, Image, Switch } from 'ant-design-vue';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { isArray, isString } from '@/utils/is';
import { formatToYMDHMS } from '/@/utils/dateUtil';
import { Tinymce } from '/@/components/Tinymce';
import TableImg from '/@/components/Table/src/components/TableImg.vue'
import Icon from '/@/components/Icon';
import { getDictItemsByCode } from '/@/utils/dict/index';
import { filterMultiDictText } from '/@/utils/dict/JDictSelectUtil.js';
import { isEmpty } from '/@/utils/is';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();

const render = {
  /**
   * 渲染列表头像
   */
  renderAvatar: ({ record }) => {
    if (record.avatar) {
      let avatarList = record.avatar.split(',');
      return h(
        'span',
        avatarList.map((item) => {
          return h(Avatar, {
            src: getFileAccessHttpUrl(item),
            shape: 'square',
            size: 'default',
            style: { marginRight: '5px' },
          });
        })
      );
    } else {
      return h(
        Avatar,
        { shape: 'square', size: 'default' },
        {
          icon: () => h(Icon, { icon: 'ant-design:file-image-outlined', size: 30 }),
        }
      );
    }
  },
  /**
   * 根据字典编码 渲染
   * @param v 值
   * @param code 字典编码
   * @param renderTag 是否使用tag渲染
   */
  renderDict: (v, code, renderTag = false) => {
    let text = '';
    let array = getDictItemsByCode(code) || [];
    let obj = array.filter((item) => {
      return item.value == v;
    });
    if (obj.length > 0) {
      text = obj[0].text;
    }
    //【jeecgboot-vue3/issues/903】render.renderDict使用tag渲染报警告问题 #903
    return isEmpty(text) || !renderTag ? h('span', text) : h(Tag, () => text);
  },

  /**
    * 渲染图片
    * @param text 图片地址
    * @returns image标签
    */
  renderImg: ({ text }) => {
    if (text) {
      if (isArray(text)) {
        return h(TableImg, { imgList: text })
      } else if (isString(text)) {
        return h(TableImg, { imgList: [text] })
      }
    }
    return ''
  },

  /**
   * 渲染图片
   * @param text
   */
  renderImage: ({ text }) => {
    if (!text) {
      return h(Image, {
        width: 30,
        height: 30,
        src: '',
        fallback:
          '',
      });
    }
    let avatarList = text.split(',');
    return h(
      'span',
      avatarList.map((item) => {
        return h(Image, {
          src: getFileAccessHttpUrl(item),
          width: 30,
          height: 30,
          style: { marginRight: '5px' },
          previewMask: () => {
            return h(Icon, { icon: 'ant-design:eye-outlined', size: 20 });
          },
        });
      })
    );
    //update-end-author:taoyan date:2022-5-24 for:  VUEN-1084 【vue3】online表单测试发现的新问题 41、生成的代码，树默认图大小未改
  },
  /**
   * 渲染 Tooltip
   * @param text
   * @param len
   */
  renderTip: (text, len = 20) => {
    if (text) {
      let showText = text + '';
      if (showText.length > len) {
        showText = showText.substr(0, len) + '...';
      }
      return h(Tooltip, { title: text }, () => showText);
    }
    return text;
  },
  /**
   * 渲染a标签
   * @param text
   */
  renderHref: ({ text }) => {
    if (!text) {
      return '';
    }
    const len = 20;
    if (text.length > len) {
      text = text.substr(0, len);
    }
    return h('a', { href: text, target: '_blank' }, text);
  },
  /**
   * 根据字典渲染
   * @param v
   * @param array
   */
  renderDictNative: (v, array, renderTag = false) => {
    let text = '';
    let color = '';
    let obj = array.filter((item) => {
      return item.value == v;
    });
    if (obj.length > 0) {
      text = obj[0].label;
      color = obj[0].color;
    }
    return isEmpty(text) || !renderTag ? h('span', text) : h(Tag, { color }, () => text);
  },
  /**
   * 渲染富文本
   */
  renderTinymce: ({ model, field }) => {
    return h(Tinymce, {
      showImageUpload: false,
      height: 300,
      value: model[field],
      onChange: (value: string) => {
        model[field] = value;
      },
    });
  },

  /*  renderSwitch: (text, arr) => {
     return text ? filterMultiDictText(arr, text) : '';
   }, */
  renderCategoryTree: (text, code) => {
    let array = getDictItemsByCode(code);
    return filterMultiDictText(array, text);
  },

  //在表格中渲染switch组件
  renderSwitch: (record, editApi, statusField = '', statusText = '', checkedText = '已启用', unCheckedText = '已禁用') => {

    if (!Reflect.has(record, 'pendingStatus')) {
      record.pendingStatus = false;
    }
    const field = statusField === '' ? 'status' : statusField;
    const text = statusText === '' ? '状态' : statusText;
    console.log("record:", record, " field:" + field)
    return h(Switch, {
      checked: String(Reflect.get(record, field)) === 'y',
      checkedChildren: checkedText,
      unCheckedChildren: unCheckedText,
      loading: record.pendingStatus,
      onChange(checked: boolean) {
        record.pendingStatus = true;
        const newStatus = checked ? 'y' : 'n';
        const { createMessage, createConfirm } = useMessage();
        createConfirm({
          iconType: 'warning',
          title: () => h('span', '操作提示'),
          content: () =>
            h('span', newStatus == 'y' ? `确定要将${text}值变更为'` + checkedText + `'吗?` : `确定要将${text}值变更为'` + unCheckedText + `'吗?`),
          onOk: async () => {
            const params = {
              id: record.id,
              field: field,
              value: newStatus,
            };
            let isUpdate = true;
            await editApi(params, isUpdate)
              .then(() => {
                Reflect.set(record, field, newStatus);
                //createMessage.success(`操作成功!`);
              })
              .catch(() => {
                record.pendingStatus = false;
                createMessage.error(`修改${text}值失败`);
              })
              .finally(() => {
                record.pendingStatus = false;
              });
          },
          onCancel: async () => {
            record.pendingStatus = false;
          },
        });
      },
    });
  },

  renderTag(text, color) {
    return isEmpty(text) ? h('span', text) : h(Tag, { color }, () => text);
  },


};

function geneBillNo(prefix) {
  let dateStr = formatToYMDHMS();
  return prefix+dateStr;
}


/**
 * 文件下载
 */
function downloadFile(url) {
  if (!url) {
    createMessage.warning('未知的文件');
    return;
  }
  if (url.indexOf(',') > 0) {
    url = url.substring(0, url.indexOf(','));
  }
  url = getFileAccessHttpUrl(url.split(',')[0]);
  if (url) {
    window.open(url);
  }
}

export { render, downloadFile,geneBillNo };
